<template>
    <fieldset>
        <legend>商品列表</legend>
        <ul>
            <li v-for="item in productData" :key="item.id">
                <b>产品名称:{{item.title}}</b>
                ------
                <b>价格:{{item.price}}</b>
                ------
                <b>库存:{{item.inventory}}</b>
                ------
                <button @click="add(item)" :disabled="item.inventory===0">+点击加入购入车</button>
            </li>
        </ul>
    </fieldset>
</template>

<script>
import {mapActions, mapState} from 'vuex'
    export default {
        methods: {
            ...mapActions('products',['FETCH','JIANA']),
            ...mapActions('carts',['SETCART']),
            add(item){
                this.SETCART(item)
                this.JIANA(item)
            }
        },
        mounted () {
            this.FETCH()
        },
        computed: {
            ...mapState('products',['productData'])
        }
    }

</script>